<template>
  <div class="page">
    <m-header :title="langText&&langText.announcement" :canback="Boolean(1)"></m-header>
    <section class="body">
      <div class="box">
        <div class="wrap">
          <div class="title">{{list.title}}</div>
          <!-- <div class="date">{{list.createtime}}</div> -->
        </div>
        <div class="new-con" v-html="list.contents"></div>
      </div>
    </section>
  </div>
</template>
<script>
import { Owner } from "@/server/server.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      id: null,
      list: {},
      langText:null,
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(["lang"])
  },
  mounted() {
    this.initData();
    let id = this.id;
    this.getNoticeDetail(id);
  },
  methods: {
    initData() {
      this.id = this.$route.params.id;
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('homeText')))
    },
    getNoticeDetail(id) {
      Owner.getNoticeDetail({ id }).then(res => {
        if (res.code == 1) {
          this.list = res.data;
          console.log(res.data);
        } else {
          mui.toast(res.msg);
        }
      });
    }
  }
};
</script>
<style>
 p{
   color:#333;
 }
</style>
<style lang="less" scoped>
@import "~link-less";
.body {
  height: 100%;
  background: #fff;
  .wrap {
    margin: 30px 30px 0;
    color: #333;
    .title {
      font-size:28px;
      font-weight:550;
      color:rgba(78,182,173,1);
    }
    .date {
      color: #333 !important;
    }
  }
  .new-con {
    // margin: 10px 30px;
    // font-size: 28px;
    // color: #333 !important;
    font-size:28px;
    font-weight:400;
    color:rgba(136,136,136,1);
    margin: 0 30px 30px 30px;
    padding-right: 30px;
  }
  .box{
      position: relative;
      margin-left: 30px;
      padding-left: 50px;
      &::before{
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border-radius: 50%;
        position: absolute;
        top: 10px;
        left: 10px;
      }
      &::after{
        content:"";
        display: block;
        width: 6px;
        height: 70%;
        background-color: #ccc;
        position: absolute;
        left: 17px;
        top: 15px;
      }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>
